$(function() {
    /*========�����ĵ���========*/


    var Data = {};
    /*========�����Ķ���========*/
    var shopid = 1,
        areaid = 1;
    /*��ʼ��*/
    init();
    function init() {
        getInlandDiscount(shopid,areaid);
        getShop();
        getArea();
    }

    function getShop() {
        $.ajax({
            url: "http://139.199.157.195:9090/api/getgsshop",
            success: function(res) {
                var html = template("getShop", res)
                $("#items1").html(html);
            }
        })
    }

    function getArea() {
        $.ajax({
            url: "http://139.199.157.195:9090/api/getgsshoparea",
            success: function(res) {
                var html = template("getArea", res)
                $("#items2").html(html);
            }
        })
    }
    /*���������ۿ�����*/
    function getInlandDiscount(shopid,areaid) {
        $.ajax({
            url: "http://139.199.157.195:9090/api/getgsproduct",
            data: {
                shopid: shopid,
                areaid: areaid
            },
            success: function(res) {
                Data = res;
                render();
            }

        })
    }

    /*��Ⱦ����*/
    function render() {

        var newData = { result: [] };
        var leng = 8;
        if (Data.result.length <= 8) {
            leng = Data.result.length;

        }
        for (var i = 0; i < leng; i++) {
            newData.result.push(Data.result.shift());
        }
        var html = template("tplSingle", newData);
        $(".contains").append(html);
        flag = false;

    }



    var flag = false;
    window.onscroll = function() {
        if (Data.result.length == 0 || flag) {
            return;
        }
        // �������ܸ߶�
        var height = $(".contains").height() + $("header").height() + $("nav").height() - $(window).height();
        var disBottom = height - $(document.body).scrollTop();
        if (disBottom < 50) {
            flag = true;
            render();
        }

    }



    $("nav > div").each(function(index, ele) {
        $(this).on("click", function() {
            $(this).find("i").css({ transform: "rotateZ(180deg)", transition: "all .5s" });
            $(this).siblings().find("i").css({ transform: "rotateZ(0)", transition: "all .5s" })
            $(".items").eq(index).show().siblings().hide();
        })
    })
  

    $("#items1").on("click", "li", function() {
       $("#shop").text($(this).find("a").text());
        $(this).find("span").show();
        $(this).siblings().find("span").hide();
        $(".items").hide();
        $(".contains>li").remove();
        shopid = $(this).attr("data-shopId");
        getInlandDiscount(shopid,areaid);

        render()
    })
    $("#items2").on("click", "li", function() {
        $("#address").text($(this).find("a").text().substring(0,2));
        $(this).find("span").show();
        $(this).siblings().find("span").hide();
        $(".items").hide();
        $(".contains>li").remove();
        areaid = $(this).attr("data-areaId");
        getInlandDiscount(shopid,areaid);
        render()
    })
    $("#items3").on("click", "li", function() {
        $("#price").text($(this).find("a").text());
        $(".items").hide();
    })



    $(".back").on("click", function() {
        javascript: history.back(-1);
    })

    //click("#shop", "#items1", "#shop>span");
    //click("#address", "#items2", "#address>span");
    //click("#price", "#items3", "#price>span");
    //click("#content", "#items4");
    ////
    ////
    //items("#items1>li","#items1>li>span");
    //items("#items2>li","#items2>li>span");
    //items("#items3>li","#items3>li>span");
    //
    //
    //
    //
    ////������ʾģ��js
    //
    //function items(a, b) {
    //    var lis = $(a);
    //    var spans = $(b);
    //    for (var i = 0; i < spans.length; i++) {
    //        lis[i].index = i;
    //        lis[i].onclick = function () {
    //            console.log(1);
    //            var x = this.index;
    //            console.log(x);
    //            console.log($("#items1>li")[x]);
    //            for (var i = 0; i < spans.length; i++) {
    //                spans[i].style.display = "none";
    //            }
    //            console.log(x);
    //            $(spans[x]).show();
    //
    //        }
    //
    //    }
    //}
    ////�˵��л�������װ
    //    function click(a, b, c) {
    //        $(a).click(function () {
    //            $(b).toggle()
    //            $(c).css({
    //                transform: "rotateZ(180deg)",
    //                transition: "all .5s"
    //            })
    //            return false;
    //        })
    //    }
    //
    //    var tips = $("#list1>a");
    //    for(var i = 0;i<tips.length;i++){
    //        tips[i].onclick = function(){
    //            console.log(tips[i]);
    //            tips[i].className = '';
    //        }
    //        this.className = "current";
    //    }





})